<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue10循环渲染指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="app">
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <th>索引</th>
          <th>ID</th>
          <th>姓名</th>
        </thead>
        <tbody>
          <!-- (item,index) index是需不需要用到索引来决定 -->
          <!-- 官方建议：只要用到v-for的指令，那么一定要绑定一个：key的属性。而且尽量要把id作为key的值 -->
          <!-- 官方对key的值的类型,是由要求的,key的值只能是字符串或者数字类型 -->
          <!-- key的值是不能重复的 -->
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: 1, name: "张三" },
            { id: 2, name: "王五" },
            { id: 3, name: "小李" },
          ],
        },
        methods: {},
      });
    </script>
  </body>
</html>
